<template>
	<el-drawer :title="titleMap[mode]" v-model="visible" :size="1600" destroy-on-close @closed="$emit('closed')">
		<el-container v-loading="loading">
			<el-main style="padding:0 20px 20px 20px">
				<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
					<el-form-item label="关联门店" prop="shops">
						<el-select v-model="form.shops" multiple filterable style="width: 100%">
							<el-option v-for="item in shops" :key="item.id" :label="item.shop_name" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="商品类目" prop="category_id">
						<el-cascader v-model="form.category_id" :options="category" :props="groupsProps"
							:show-all-levels="false" clearable style="width: 100%;"></el-cascader>
					</el-form-item>
					<el-form-item label="商品名称" prop="product_title">
						<el-input v-model="form.product_title"></el-input>
					</el-form-item>
					<el-form-item label="封面图片" prop="product_image">
						<sc-oss-upload v-model="form.product_image" :data="data" :apiObj="apiObj"
							accept="image/jpg,image/png,image/jpeg,video/mp4" :width="220" :height="220">
							<div class="custom-empty">
								<el-icon><el-icon-upload /></el-icon>
								<p>封面图片</p>
							</div>
						</sc-oss-upload>
					</el-form-item>
					<el-form-item label="在售状态" prop="product_on_sale">
						<el-radio-group v-model="form.product_on_sale">
							<el-radio :label="true">在售</el-radio>
							<el-radio :label="false">下架</el-radio>
						</el-radio-group>
					</el-form-item>

					<el-form-item v-if="form.product_on_sale" label="计划下架时间" prop="product_off_sale_scheduled_at">
						<el-date-picker value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
							:default-time="new Date(2000, 1, 1, 23, 59, 59)"
							v-model="form.product_off_sale_scheduled_at" type="datetime" placeholder="选择自动下架时间" />
					</el-form-item>
					<el-form-item label="商品类型" prop="product_type">
						<el-radio-group v-model="form.product_type">
							<el-radio :label="'虚拟'">虚拟</el-radio>
							<el-radio :label="'实物'">实物</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item v-if="false" label="活动人群" prop="product_activity_group">
						<el-input v-model="form.product_activity_group"></el-input>
					</el-form-item>
					<el-form-item label="推荐值" prop="product_recommend_pos">
						<el-input style="width: 400px;" v-model="form.product_recommend_pos"></el-input>
					</el-form-item>

					<el-form-item label="订单通知">
						<selectEmployee v-model="form.product_order_notice" multiple style="width: 700px;">
							<template #prefix>
								<el-icon>
									<User />
								</el-icon>
							</template>
						</selectEmployee>
					</el-form-item>

					<el-form-item label="功能标签" prop="product_tags">
						<ta-tag-plus v-model="form.product_tags" style="width: 700px;">

						</ta-tag-plus>
					</el-form-item>

					<el-form-item label="有效期" prop="product_valid_days">
						<div style="width: 400px;">
							<el-input type="number" placeholder="0是不限制" v-model="form.product_valid_days">
								<template #prepend>
									在客户购买
								</template>
								<template #append>
									天内有效
								</template>
							</el-input>
						</div>
					</el-form-item>
					<el-form-item label="规格信息" prop="skus">
						<sc-form-table ref="table" v-model="form.skus" :addTemplate="addTemplate" drag-sort
							placeholder="暂无数据">
							<el-table-column prop="title" label="名称/描述" min-width="150">
								<template #default="scope">
									<el-input v-model="scope.row.sku_title" placeholder="请输入名称"></el-input>
									<el-input v-model="scope.row.sku_description" placeholder="请输入描述"></el-input>
								</template>
							</el-table-column>
							<el-table-column prop="price" label="预付/尾款" width="120">
								<template #default="scope">
									<el-input label="预付" v-model="scope.row.sku_deposit_price"
										placeholder="预付"></el-input>
									<el-input label="尾款" v-model="scope.row.sku_final_payment"
										placeholder="尾款"></el-input>
								</template>
							</el-table-column>
							<el-table-column prop="sku_activity_points" label="活动金" width="120" v-if="false">
								<template #default="scope">
									<el-input v-model.number="scope.row.sku_activity_points"
										placeholder="请输入活动金"></el-input>
								</template>
							</el-table-column>
							<el-table-column prop="sku_points" label="所需积分" width="120">
								<template #default="scope">
									<el-input label="积分" v-model="scope.row.sku_points" placeholder="积分"></el-input>
								</template>
							</el-table-column>
							<el-table-column prop="sku_stock" label="库存" width="110" align="center">
								<template #default="scope">
									<el-input v-model="scope.row.sku_stock"></el-input>
								</template>
							</el-table-column>
							<el-table-column width="320">

								<template #header>
									是否限购
									<el-switch v-model="form.product_is_purchase_limit" :active-value="true"
										:inactive-value="false">
									</el-switch>
								</template>

								<template #default="scope">

									<div style="display: flex; flex-direction: column;"
										v-if="form.product_is_purchase_limit">

										<el-input type="number" v-model="scope.row.sku_purchase_limit_cycle"
											placeholder="请输入">
											<template #prepend>
												在
											</template>
											<template #append>
												<el-select v-model="scope.row.sku_purchase_limit_unit" placeholder="请选择"
													style="width: 135px;">
													<el-option label="永久" value="once" />
													<el-option label="自然年内" value="year" />
													<el-option label="自然月内" value="month" />
													<el-option label="自然天内" value="day" />
													<el-option label="小时内" value="hour" />
													<el-option label="分钟内" value="minute" />
												</el-select>
											</template>
										</el-input>

										<el-input type="number" v-model="scope.row.sku_purchase_limit_quantity"
											placeholder="请输入">
											<template #prepend>
												限购
											</template>
											<template #append>
												次
											</template>
										</el-input>

									</div>

								</template>

							</el-table-column>

							<el-table-column label="通用佣金" width="320">

								<template #header>
									是否分销
									<el-switch v-model="form.product_is_distribution" :active-value="true"
										:inactive-value="false">
									</el-switch>
								</template>

								<template #default="scope">

									<template v-if="form.product_is_distribution">
										<template v-if="scope.row.sku_comm_type=='none' || !scope.row.sku_comm_type">
											<el-select v-model="scope.row.sku_comm_type" placeholder="请选择"
												style="width: 115px;">
												<el-option label="不分销" value="none" />
												<el-option label="固定金额" value="fixed" />
												<el-option label="按比例" value="percent" />
											</el-select>
										</template>

										<template v-if="scope.row.sku_comm_type=='fixed'">

											<el-input type="number" v-model="scope.row.sku_comm_fee" placeholder="请输入">
												<template #prepend>
													<el-select v-model="scope.row.sku_comm_type" placeholder="请选择"
														style="width: 135px;">
														<el-option label="不分销" value="none" />
														<el-option label="固定金额" value="fixed" />
														<el-option label="按比例" value="percent" />
													</el-select>
												</template>
												<template #append>
													元
												</template>
											</el-input>

										</template>


										<template v-if="scope.row.sku_comm_type=='percent'">

											<el-input type="number" v-model="scope.row.sku_comm_rate"
												style="max-width: 600px" placeholder="1~100">
												<template #prepend>
													<el-select v-model="scope.row.sku_comm_type" placeholder="请选择"
														style="width: 115px;">
														<el-option label="不分销" value="none" />
														<el-option label="固定金额" value="fixed" />
														<el-option label="按比例" value="percent" />
													</el-select>
												</template>
												<template #append>
													元
												</template>
											</el-input>
										</template>
									</template>


								</template>
							</el-table-column>
						</sc-form-table>
					</el-form-item>
					<el-form-item label="商品详情" prop="product_description">
						<sc-editor v-model="form.product_description" placeholder="请输入" :height="5000"></sc-editor>
					</el-form-item>

				</el-form>
			</el-main>
			<el-footer>
				<el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
				<el-button @click="visible=false">取消</el-button>
			</el-footer>
		</el-container>
	</el-drawer>
</template>

<script>
	var _this;

	import {
		defineAsyncComponent
	} from 'vue';
	const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));

	import selectEmployee from "./selectEmployee.vue";

	export default {
		emits: ['success', 'closed'],
		components: {
			scEditor,
			selectEmployee
		},
		data() {
			return {
				tagOptions: [],
				data: {

				},
				role_id: null,
				loading: false,
				mode: "add",
				titleMap: {
					add: '添加商品',
					edit: '编辑商品'
				},
				form: {
					shop_id: null,
					category_id: null,
					tags: [],
					product_order_notice: [],
					product_title: "",
					product_on_sale: true,
					product_image: "",
					product_tags: [],
					skus: [],
					product_off_sale_scheduled_at: null,
					product_description: "",
					product_activity_group: "",
					product_comm_type: '',
					product_is_purchase_limit: false,
					product_recommend_pos: 0,
					product_valid_days: 350
				},
				rules: {
					product_description: [{
						required: true,
						message: '请填写商品详情'
					}],
					skus: [{
						required: true,
						message: '请填写sku信息'
					}],
					category_id: [{
						required: true,
						message: '请选择分类'
					}],
					product_title: [{
						required: true,
						message: '请输入商品名称'
					}],
					product_name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}],
					publish_status: [{
						required: true,
						message: '请选择上架状态',
						trigger: 'blur'
					}],
					product_image: [{
						required: true,
						message: '请上传封面图片'
					}]
				},
				addTemplate: {
					sku_title: "",
					sku_description: "",
					sku_price: "",
					sku_stock: "",
					sku_activity_points: "",
					sku_comm_rate: 0,
					sku_comm_fee: 0,
					sku_comm_type: 'none',
					sku_purchase_limit_quantity: 50,
					sku_purchase_limit_cycle: null,
					sku_purchase_limit_unit: null,
				},
				visible: false,
				isSaveing: false,
				selectionFilters: [],
				filtersAddTemplate: {
					text: '',
					value: ''
				},
				apiObj: null,
				category: [],
				shops: [],
				groupsProps: {
					value: "id",
					label: "cat_name",
					emitPath: false,
				},
				tagProps: {
					value: "id",
					label: "cat_name",
					emitPath: false,
					multiple: true
				}
			}
		},
		mounted() {
			_this = this;
			this.getConfig()
			this.getCategory()
			this.getShop()



			this.$API.system.commPost("system/category/manage/tree")({
				model: 'Tag'
			}).then(res => {
				this.tagOptions = res.data;
			});




		},
		methods: {
			async getCategory() {
				var res = await this.$API.system.category.tree.get();
				this.category = res.data;
			},
			async getShop() {
				var res = await this.$API.system.shop.list.get();
				this.shops = res.data.data;
			},
			success(res) {
				// this.form.image = res.data.src
				console.error(res)
				return true;
			},
			async getConfig() {
				/*var res = await this.$API.system.upload.token.get();
				var config = {
				    key : `${res.data.dir}test1657555228411.png`,
				    policy: res.data.policy,
				    OSSAccessKeyId: res.data.accessid,
				    success_action_status : '200',
				    callback: res.data.callback,
				    signature: res.data.signature,
				}
				this.$API.common.upload.url = res.data.host;
				this.apiObj = this.$API.common.upload;
				this.data = config;*/
			},
			//显示
			open(data) {
				if (data) {
					this.mode = data;
				}
				this.visible = true;
				this.$nextTick(() => {
					if (this.mode == 'add') {
						this.$refs.table.rowAdd()
					}
				})
				return this;
			},
			//表单提交方法
			submit() {
				/*
								console.error("this.form", this.form);
								return;
				*/
				this.$refs.ruleForm.validate(async (data) => {
					if (data) {
						var res;
						this.isSaveing = true;
						if (this.mode == 'add') {
							res = await _this.$API.system.goods.create.post(this.form);
						} else {
							res = await _this.$API.system.goods.update.post(this.form);
						}
						this.isSaveing = false;
						if (res.code == 0) {
							this.$emit('success', data, this.mode)
							this.visible = false;
							this.$message.success("操作成功")
						} else {
							this.$alert(res.message, "提示", {
								type: 'error'
							})
						}
					}
				})
			},
			//表单注入数据
			setData(data) {
				this.loading = true

				if (!data.id) {
					this.loading = false
					if (data.category_id) {
						this.form.category_id = data.category_id
					}
					return;
				}

				const params = {
					id: data.id
				}
				setTimeout(async () => {
					var res = await this.$API.system.goods.info.get(params)
					this.loading = false
					this.form = res.data
				}, 0)
			},
			//设置过滤项
			setFilters(filters) {
				this.selectionFilters = filters
				this.setFiltersVisible = true
			}
		}
	}
</script>

<style>
	.custom-empty {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #8c939d;
		border-radius: 5px;
	}

	.custom-empty i {
		font-size: 30px;
		color: #fff;
	}

	.custom-empty p {
		font-size: 12px;
		font-weight: normal;
		color: #fff;
		margin-top: 10px;
	}
</style>
